package myJs.search.detail

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.tabs.{Tab, Tabs}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.web.html._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object MCp {

  case class Props(geneName: String)

  val component = FunctionalComponent[Props] { props =>

    val (tab, setTab) = useState("tissue")

    object FTool {

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    div(style := Style(display = csstypeStrings.flex),
      img(style := Style(height = 40,marginRight = 5), src := s"${Api.images}/mus.png"),
      div(id := "basic",className:="hcp",
        Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
          Tab(eventKey = "tissue", title = "Tissue")(
            div(style := Style(marginTop = "20px"),
              MTissueCp(geneName = props.geneName)
            )
          ),
        ),


      ),
    )

  }

  object STool {


  }

}
